<template>
    <div class="layout">
        <div class="nav">
            <ul>
                <!-- 高亮文字的类名 -->
                <li :class="index==0 ? 'active':''"
                 ref="act"
                >
                <span @click="toggle(0,$event)" 
                >全部</span></li>
                <li :class="index==1 ? 'active':''"
                >
                <span @click="toggle(1,$event)" 
                >进行中 </span></li>
                <li :class="index==2 ? 'active':''"
                >
                    <span @click="toggle(2,$event)" 
                    >已完成</span></li>
            </ul>
            <div class="line"
            :style="`left:${left}px;width:${width}px`">

            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'MyorderNav',
    data() {
        return {
            index:0,
            left:0,
            width:0,
        }
    },
    methods: {
        toggle(index,event) {
            // 设置索引值
            this.index=index;
            let element=event.target;
            // 当前目标元素是span标签
            if(element.tagName=="SPAN") {
                // 改变当前元素的left值
                this.left=element.offsetLeft;
                // 改变当前元素的width值
                this.width=element.offsetWidth;
                // 子组件传值给父组件 (自定义事件 数据)
                this.$emit('item-nav',{data:this.index});
            }
        }
    },
    mounted() {
        this.$nextTick(()=> {
            // ref 标记拿到 dom元素
            let ele=this.$refs.act;
            let element=ele.children[0];
            this.left=element.offsetLeft;
            this.width=element.offsetWidth;
        })
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/base.less');
.nav {
    width: 100%;
    height:45px;
    background-color:rgba(255,255,255,.4);
    border-bottom: 2px solid #fff;
    position: relative;
    ul{
        width:100%;
        height:45px;
        display: flex;
        li {
            flex:1 0 33.3333%;
            height:45px;
            line-height: 45px;
            font-size:16px;
            text-align: center;

            span {
                display:inline-block;
                height:45px;
                vertical-align: middle;
                padding:0 5px;
                border-bottom: 2px solid transparent;
            }
        }
        li.active{
            span{
                border-bottom: 2px solid transparent;
            }
        }
    }
.line{
    width:100px;
    height: 2px;
    background-color:@priceColor;
    position: absolute;
    left:25px;
    bottom: 0;
    transition: left .2s;
}
}
</style>